<template>
    <view class="container">
      <view class="title">管理员中心</view>
      
      <view v-if="!isAdmin" class="error-card card">
        <text>您没有管理员权限</text>
        <button class="btn-primary" size="mini" @click="navigateBack">返回</button>
      </view>
      
      <block v-else>
        <view class="stats-row">
          <view class="stats-card card" @click="navigateTo('/pages/admin/enrollment')">
            <view class="stats-title">报名申请</view>
            <view class="stats-value">{{ stats.enrollmentCount }}</view>
            <view class="stats-label">待审核</view>
          </view>
          <view class="stats-card card" @click="navigateTo('/pages/admin/exam')">
            <view class="stats-title">考试管理</view>
            <view class="stats-value">{{ stats.examCount }}</view>
            <view class="stats-label">即将开始</view>
          </view>
        </view>
        
        <view class="stats-row">
          <view class="stats-card card" @click="navigateTo('/pages/admin/user')">
            <view class="stats-title">用户管理</view>
            <view class="stats-value">{{ stats.userCount }}</view>
            <view class="stats-label">总用户数</view>
          </view>
          <view class="stats-card card" @click="navigateTo('/pages/admin/coach')">
            <view class="stats-title">教练管理</view>
            <view class="stats-value">{{ stats.coachCount }}</view>
            <view class="stats-label">在职教练</view>
          </view>
        </view>
        
        <view class="menu-card card">
          <view class="menu-title">管理功能</view>
          <view class="menu-list">
            <view class="menu-item" @click="navigateTo('/pages/admin/enrollment')">
              <view class="menu-item-content">
                <text class="menu-icon">📋</text>
                <text class="menu-name">报名管理</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/admin/material')">
              <view class="menu-item-content">
                <text class="menu-icon">📎</text>
                <text class="menu-name">材料审核</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/admin/exam')">
              <view class="menu-item-content">
                <text class="menu-icon">📝</text>
                <text class="menu-name">考试管理</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/admin/exam-registration')">
              <view class="menu-item-content">
                <text class="menu-icon">📌</text>
                <text class="menu-name">考试报名审核</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/admin/coach')">
              <view class="menu-item-content">
                <text class="menu-icon">👨‍🏫</text>
                <text class="menu-name">教练管理</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/admin/user')">
              <view class="menu-item-content">
                <text class="menu-icon">👥</text>
                <text class="menu-name">用户管理</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
            <view class="menu-item" @click="navigateTo('/pages/admin/settings')">
              <view class="menu-item-content">
                <text class="menu-icon">⚙️</text>
                <text class="menu-name">系统设置</text>
              </view>
              <text class="menu-arrow">›</text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </template>
  
  <script>
  import { mapGetters } from 'vuex';
  
  export default {
    data() {
      return {
        stats: {
          enrollmentCount: 0,
          examCount: 0,
          userCount: 0,
          coachCount: 0
        },
        loading: true
      };
    },
    computed: {
      ...mapGetters('user', [
        'isAdmin'
      ])
    },
    onLoad() {
      if (this.isAdmin) {
        this.loadStats();
      }
    },
    methods: {
      navigateTo(url) {
        uni.navigateTo({
          url
        });
      },
      navigateBack() {
        uni.navigateBack();
      },
      loadStats() {
        uni.showLoading({
          title: '加载中...'
        });
        
        // 这里简化处理，实际项目中应该从API获取数据
        setTimeout(() => {
          this.stats = {
            enrollmentCount: 12,
            examCount: 5,
            userCount: 256,
            coachCount: 16
          };
          
          uni.hideLoading();
          this.loading = false;
        }, 1000);
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 30rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
  }
  
  .error-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .stats-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30rpx;
  }
  
  .stats-card {
    width: 48%;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .stats-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  
  .stats-value {
    font-size: 48rpx;
    font-weight: bold;
    color: #3c8dbc;
    margin-bottom: 10rpx;
  }
  
  .stats-label {
    font-size: 24rpx;
    color: #999;
  }
  
  .menu-card {
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .menu-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
  }
  
  .menu-item:last-child {
    border-bottom: none;
  }
  
  .menu-item-content {
    display: flex;
    align-items: center;
  }
  
  .menu-icon {
    font-size: 36rpx;
    margin-right: 20rpx;
  }
  
  .menu-name {
    font-size: 30rpx;
    color: #333;
  }
  
  .menu-arrow {
    font-size: 36rpx;
    color: #999;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #3c8dbc;
  }
  </style>